import ReactHighlightWords from 'react-highlight-words';
import PropTypes from 'prop-types';

const CommonSearchResult = ({
  text,
  searchWord
}) => {
  return !!searchWord ? (
    <ReactHighlightWords
      searchWords={[searchWord]}
      textToHighlight={text}
      highlightStyle={{
        color: '#000',
        backgroundColor: '#ff0',
        padding: '0 1px',
      }}
    ></ReactHighlightWords>
  ) : (
    <span>{text}</span>
  );
};

CommonSearchResult.propTypes = {
  text: PropTypes.string.isRequired,
  searchWord: PropTypes.string
}

export default CommonSearchResult;
